{extend name="layout/layout" /}

{block name="navbar"}{/block}

{block name="style"}
	<style>
		body, .mui-content{
			background: #fff;
		}

		.register{
			padding: 30px 20px;
		}

		.mui-input-group:before, .mui-input-group:after{
			height: 0;
		}


		.mui-input-row label{
			width: 20%;
			text-align: center;
		}

		.mui-input-row label~input{
			width: 80%;
			font-size: 14px;
		}

		.forget{
			margin-top: 20px;
			font-size:12px;
		}

		.forget a{
			text-decoration: underline;
		}

		.code-group{
			position: relative;
		}

		.code-group .code{
			position: absolute;
			right: 0px;
			top:5px;
			height: 30px;
			color:#e60012;
			border: 1px solid #e60012;
			font-size: 12px;
			text-align: center;
			padding: 0 10px;
			line-height: 30px;
			border-radius: 4px;
			width: 100px;
		}

		.code.disabled{
			background: #ccc;
			color:#fff;
			border-color: #ccc;
		}
	</style>
{/block}

{block name="main"}
	<div class="register" v-cloak>

		<form class="mui-input-group">
			<div class="mui-input-row">
				<label><i class="mui-icon iconfont icon-mima"></i></label>
				<input type="password" name="old_password" v-model="old_password" class="mui-input-password" placeholder="请输入原密码">
			</div>

			<div class="mui-input-row">
				<label><i class="mui-icon iconfont icon-mima"></i></label>
				<input type="password" name="password" v-model="password" class="mui-input-password" placeholder="请输入新密码">
			</div>

			<div class="mui-input-row">
				<label><i class="mui-icon iconfont icon-mima"></i></label>
				<input type="password" name="confirm_password" v-model="confirm_password" class="mui-input-password" placeholder="请重新输入新密码">
			</div>

			<button class="mui-btn mui-btn-block mui-btn-theme" type="button" @tap="reset()">确认修改</button>
		</form>
	</div>
{/block}

{block name="script"}
	<script>

		var myVue = new Vue({
			el:'.register',
			data:{
				old_password: '',
				password: '',
				confirm_password: '',
				type: '{$type}'
			},
			mounted: function(){
				if(!token){
					this.login();
				}
			},
			methods: {
				reset:function(){

					if(!this.old_password){
						mui.toast('请输入原密码');return;
					}


					if(!this.password) {
						mui.toast('请输入新密码');
						return;
					}

					if(!this.confirm_password){
						mui.toast('请重新输入新密码');return;
					}

					if(this.confirm_password != this.password){
						mui.toast('两次密码不一致');return;
					}

		
					var payPreg = /^\d{6}$/;
					if(this.type == 'pay_password' && !payPreg.test(this.password)){
						mui.toast('支付密码为6位数字');return;
					}

					if(this.type == 'password') {
						var url =  'user/changePassword';
					} else {
						var url =  'user/changePayPassword';
					}
					var that = this;

					var formData = {
						token: token,
						old_password: that.old_password,
						password: that.password,
						confirm_password: that.confirm_password,
					};

					layer.open({
						type:2,
						shadeClose:false,
						shade: 'background-color: rgba(0,0,0,.3)',
					});
					request(that, {'url': url,'data': formData}, function(res){
						if(res.code == 200) {
							mui.toast(res.msg);
							mui.back();
						} else {
							layer.closeAll();
							mui.toast(res.msg);
						}	
					});

				},

				login:function(){
					location.href = '/mobile/user/login';
				},
			}
		});
	</script>
{/block}